<template>
  <div class="content-collect">
    <el-row :gutter="10">
      <el-col :span="4">
        <select-list title="标签列表" :height="360" @selected="listSelect">
          <template v-slot:toolItem>
            <div class="tool-item"><icon-tip content="添加" eleIcon="el-icon-plus"></icon-tip></div>
            <div class="tool-item"><icon-tip content="编辑" eleIcon="el-icon-edit"></icon-tip></div>
            <div class="tool-item"><icon-tip content="删除" eleIcon="el-icon-close"></icon-tip></div>
            <div class="tool-item"><icon-tip content="清空" eleIcon="el-icon-delete"></icon-tip></div>
            <div class="tool-item"><icon-tip content="上移" eleIcon="el-icon-arrow-up"></icon-tip></div>
            <div class="tool-item"><icon-tip content="下移" eleIcon="el-icon-arrow-down"></icon-tip></div>
          </template>
        </select-list>
        <collapse-set></collapse-set>
      </el-col>
      <el-col :span="20">
        <div class="main-content">
          <!-- 注释引导 -->
          <small-tip v-slot:content class="step step-1">1. 从页面中提取您需要的标签</small-tip>
          <small-tip v-slot:content class="step step-2">2. 分页, 多页, 循环设置</small-tip>
          <!-- 测试结果 -->
          <div class="test-area">
            <el-table height="400">
              <el-table-column label="标签"></el-table-column>
              <el-table-column label="结果"></el-table-column>
              <el-table-column label="字数"></el-table-column>
              <el-table-column label="图链"></el-table-column>
            </el-table>
            <div class="logs">
              <el-tabs tab-position="right" type="card">
                <el-tab-pane class="logs-item" label="日志">
                  <div class="logs-info">
                    <div class="list-item" v-for="(v, i) in new Array(30).fill(1)" :key="i">{{new Date().toLocaleString()}}</div>
                  </div>
                </el-tab-pane>
                <el-tab-pane class="logs-item" label="下载">
                  <el-table height="200px">
                    <el-table-column label="文件"></el-table-column>
                    <el-table-column label="大小"></el-table-column>
                    <el-table-column label="进度"></el-table-column>
                    <el-table-column label="速度"></el-table-column>
                    <el-table-column label="时间"></el-table-column>
                    <el-table-column label="状态"></el-table-column>
                    <el-table-column label="续传"></el-table-column>
                    <el-table-column label="地址"></el-table-column>
                    <el-table-column label="序号"></el-table-column>
                  </el-table>
                  <el-table height="200px">
                    <el-table-column label="尝试"></el-table-column>
                    <el-table-column label="进度"></el-table-column>
                    <el-table-column label="已完成"></el-table-column>
                    <el-table-column label="分块大小"></el-table-column>
                    <el-table-column label="起点"></el-table-column>
                    <el-table-column label="终点"></el-table-column>
                    <el-table-column label="速度"></el-table-column>
                    <el-table-column label="剩余"></el-table-column>
                    <el-table-column label="状态"></el-table-column>
                    <el-table-column label="地址"></el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
          <!-- 标签配置 -->
          <div class="tag-setting" v-if="showTagSetting">
            <div class="setting-header">
              <i class="el-icon-location"></i>
              <div>当前正在编辑标签: {{activeTagName}}</div>
              <i class="el-icon-close close-icon" @click="showTagSetting = false"></i>
            </div>
            <data-collect></data-collect>
            <data-process></data-process>
          </div>
        </div>
        <div class="footer-test">
          <div>
            <small-tip v-slot:content>设置好了规则? 拿一个内容页面测试一下!</small-tip>
          </div>
          <div class="test-content">
            <el-select class="test-select" size="mini">
              <el-option></el-option>
            </el-select>
            <el-button size="mini" plain>测试</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import SelectList from './components/SelectList.vue'
import IconTip from '@/components/IconTip.vue'
import CollapseSet from './components/CollapseSet.vue'
import SmallTip from '@/components/SmallTip.vue'
import DataCollect from './components/DataCollect.vue'
import DataProcess from './components/DataProcess.vue'
export default {
  name: 'contentCollect',
  components: {
    SelectList,
    IconTip,
    CollapseSet,
    SmallTip,
    DataCollect,
    DataProcess
  },
  data () {
    return {
      activeCollapse: '1',
      showTagSetting: true,
      activeTagName: ''
    }
  },
  methods: {
    listSelect (v) {
      console.log(v)
      this.activeTagName = v.name
      this.showTagSetting = true
    }
  }
}
</script>
<style lang="scss" scoped>
.content-collect {
  padding: 20px 20px 0;
  .main-content {
    position: relative;
    height: 818px;
    // height: calc(100vh - 233px);
    .step {
      position: absolute;
      left: 20px;
      &.step-1 {
        top: 20%;
      }
      &.step-2 {
        bottom: 25%;
      }
    }
    .test-area {
      position: relative;
      z-index: 1111;
      background: #fff;
      .logs {
        .logs-item {
          height: 400px;
        }
        .logs-info {
          height: 400px;
          overflow-y: auto;
          .list-item {
            padding: 10px 20px;
            border-bottom: 1px solid #dfdfdf;
          }
        }
      }
    }
    .tag-setting {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 9998;
      background: #fff;
      .setting-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px;
        background: #dfdfdf;
        .close-icon {
          font-weight: bolder;
          color: rgb(177, 8, 8);
          cursor: pointer;
        }
      }
    }
  }
  .footer-test {
    .test-content {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      .test-select {
        width: 90%;
      }
    }
  }
}
</style>
